<template>
  <div class="co-radio__wrap">
    <input class="co-radio__checkbox" :checked='value === checkedValue' type="checkbox">
    <label class="co-radio__outer" @click="toggle">{{label}}</label>
  </div>
</template>

<script>

export default {
  name: 'co-radio',
  data () {
    return {
      checkedValue: ''
    }
  },
  methods: {
    toggle () {
      // console.log(this.value)
      // this.checkedValue = this.value
      this.$parent.trigger('input', this.value)
    }
  },
  props: ['label', 'value']
}
</script>

<style scoped lang=scss>
  *{
    margin: 0px;
    padding: 0px;
  }
  .co-radio__wrap{
    display: inline-block;
    .co-radio__checkbox{
      display: none;
    }
    .co-radio__checkbox:checked + .co-radio__outer{
      border-color: rgba(35, 149, 255, .3);
      background-color: #eef7fe;
      color: #2195ff;
    }
    .co-radio__outer{
      font-size: 25px;
      padding: 15px 39px;
      color: #666;
      border: 1px solid #ddd;
      border-radius: 10px;
      margin: 10px 0px;
    }
  }
</style>
